<template>
  <div>
    <el-card class="box-card" style="margin-bottom: 20px;">
      <div class="user" style="height: 60%">
        <img src="../assets/images/pic.jpg" alt="">
        <div class="user-info">
          <p class="name">{{ user.userName }}</p>
          <p class="access">{{ user.id }}</p>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="login-info" style="height: 40%">
        <p>昵称:<span>{{ user.nickName }}</span></p>
        <p>类别:<span>{{ user.role === '0' ? '学生' : '老师' }}</span></p>
        <p>性别:<span>{{ user.sex === '0' ? '男' : '女' }}</span></p>
        <p>邮箱:<span>{{ user.email }}</span></p>
        <p>手机:<span>{{ user.phone }}</span></p>
      </div>
    </el-card>

  </div>
</template>

<script>
import {mapState} from 'vuex'
import {getMenu} from "@/api/menu";

export default {
  name: "Home",
  data() {
    return {
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created() {

  }
}
</script>

<style scoped lang="less">
.user {
  display: flex;
  align-items: center;

  img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 40px;
  }

  .user-info {
    .name {
      font-size: 32px;
      margin-bottom: 10px;
    }

    .access {
      color: #999999;
    }
  }
}

.login-info {
  p {
    line-height: 28px;
    font-size: 14px;
    color: #999999;

    span {
      color: #666666;
      margin-left: 60px;
    }

  }
}


</style>
